<template>
  <div class="table_list_fix">
    <!-- 扩展性内容 -->
    <slot name="content_context" />
    <!-- table表格 -->
    <el-table
      class="basic-table"
      use-virtual
      ref="elTable"
      v-loading="loading"
      :border="border"
      :data="dataSource"
      :height="tableHeight"
      :max-height="maxTableHeight"
      :show-summary="showSummary"
      :header-cell-style="{ textAlign: tableHeaderAlign }"
      @selection-change="selectionChange"
      @select="selectionSingle"
      @select-all="selectionAll"
      @row-dblclick="handleRowDblclick"
      :summary-method="getSummaries"
      :row-style="{height: '40px'}"
      @sort-change="handleSortChange"
      :row-key="rowKey"
      @header-dragend="handleHeaderDragend"
    >
      <el-table-column v-if="showSelectCol" align="center" fixed type="selection" width="55" :selectable="handleSelectable" />
      <el-table-column
        v-for="column in columns"
        :key="column.key"
        :prop="column.key"
        :label="column.title"
        :property="column.key"
        :align="column.align || 'center'"
        :min-width="column.width || 120"
        :fixed="column.fixed"
        :formatter="column.formatter"
        :show-overflow-tooltip="!column.notShowTip"
        :sortable="column.sortable"
      >
        <template v-if="column.render" v-slot="scope">
          <table-column
            :index="scope.$index"
            :row="scope.row"
            :col="scope.column"
            :render="column.render"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="showActionCol"
        :fixed="actionColFixed"
        :min-width="actionColWidth"
        :label="actionColLabel">
        <template slot-scope="scope">
          <table-column
            :index="scope.$index"
            :row="scope.row"
            :col="scope.column"
            :render="actionRender"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        :total="pagination.totalNum"
        :current-page="pagination.nowPage"
        :page-sizes="pageSizes"
        :page-size="pagination.pageShow"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import tableColumn from './tableColumn';
import { toFixedCustomize } from '@/utils/bizUtils'

export default {
  name: 'BasicList',
  components: {
    tableColumn,
  },
  props: {
    dataSource: {
      type: Array,
      default () {
        return [];
      },
    },
    columns: {
      type: Array,
      default () {
        return [];
      },
    },
    actionColFixed: {
      type: [Boolean, String],
      default: 'right',
    },
    showActionCol: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    tableHeight: {
      type: Number,
      default: null,
    },
    maxTableHeight: {
      type: Number,
      default: null,
    },
    actionColWidth: {
      type: Number,
      default: 100,
    },
    actionColLabel: {
      type: String,
      default: '操作',
    },
    actionRender: {
      type: Function,
      default: () => {},
    },
    showSelectCol: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    pagination: {
      type: Object,
      default () {
        return {
          nowPage: 1,
          totalNum: 0,
          pageShow: 10,
        }
      },
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 50, 100, 500, 1000]
      }
    },
    selectionChange: {
      type: Function,
      default: () => {},
    },
    selectionSingle: {
      type: Function,
      default: () => {},
    },
    selectionAll: {
      type: Function,
      default: () => {},
    },
    isShowTooltip: {
      type: Boolean,
      default: true
    },
    checkSelectable: {
      type: Function
    },
    // 合计字段
    summaryFields: {
      type: Array,
      default: () => {
        return []
      },
    },
    rowKey: {
      type: String
    },
    tableHeaderAlign: {
      type: String,
      default: 'center'
    }
  },

  data () {
    return {
      multipleSelection: [],
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
    });
  },
  methods: {
    handlePageChange (current) {
      this.$emit('pageChange', current);
    },
    handlePageSizeChange (length) {
      this.$emit('pageSizeChange', length);
    },
    handleRowDblclick (row, column, event) {
      this.$emit('rowDblclick', row);
    },
    /* 表格checkbox禁用与否状态 */
    handleSelectable (row, index) {
      /*
        返回true，表格可勾选
        返回false，表格不可勾选
      */
      if (!this.checkSelectable) { // 如果没有表格勾选状态判断方法，就默认可以勾选
        return true;
      }
      return this.checkSelectable({ row });
    },
    // 自定义需合计字段
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        this.summaryFields && this.summaryFields.map((ele) => {
          if (column.property.includes(ele)) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = toFixedCustomize(sums[index]);
          }
        })
      });
      return sums;
    },
    // 排序
    handleSortChange ({ prop, order }) {
      this.$emit('handleSortChange', { prop, order })
    },
    handleHeaderDragend (newWidth, oldWidth, column, event) {
      this.$emit('handleHeaderDragend', {
        newWidth,
        oldWidth,
        column,
        event,
        refs: this.$refs.elTable, // 表格实例
        doLayout: this.$refs.elTable.doLayout, // 重新计算表格布局方法
      })
    }
  },
};
</script>

<style lang="less" scoped>
.basic-table {
  // /deep/.el-button {
  //   padding: 0px;
  // }
  margin-top: 6px;
}
.operate-group {
  .operate-btn {
    margin-left: 5px;
  }
}
.pagination-container {
  text-align: right;
  padding-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.total-num {
  margin-top: 5px;
  float: right;
}
</style>
